<!--问答列表 -->
<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index">
		<down-bar :params="params" @search="search()"></down-bar>
		<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
		<!-- top="120"  删掉 -->
		<!-- @init="mescrollInit"  第一次触发 -->
		<mescroll-body :ref="'mescrollRef'+i"  :down="downOption" @down="downCallback"
			:up="upOption" @up="upCallback"  >
			<!-- 数据列表 -->
			<!-- <view v-for="item in  50"  :key="item">{{item}}</view> -->
			<question-item v-for="(item,index) in list "  :key="index"  :item="item"></question-item>
		</mescroll-body>
	</view>
</template>

<script>
	// 导入混合文件
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	// 导入混合文件
	import downBar from './down-bar.vue'
	//api 接口
	import api from '@/api/question.js';
	//导入子组件  问答公共组件
	import questionItem from '@/components/common/question-item.vue'
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)	
		components: {
			downBar,
			questionItem
		},
		props: {
			params: {
				type: Object,
				default: () => {}
			},
			content: {
				type: String,
				default: ''
			},
			//  注意：（i参数）  兼容支付包和小程序的
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default () {
					return 0
				}
			},

		},

		data() {
			return {
				upOption: {
					auto: false, // 不自动加载
					//noMoreSize 是为了显示数据 提示框  -----END---- 没有更多了
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				},
				searchData: { //封装搜索条件
					content: null, //关键字内容
					sort: null, //排序类型  （new 最新 hot 热门）
					labelId: null, //标签id  子标签
					categoryId: null //分类id  //点击不限的时候获取到
				},
				list: [] //渲染问答列表数据
			}
		},
		mounted() {
			// console.log(this.list,'list数据看下有摸鱼')
			//如果有其他页面带的请求参数 则获取对应的请求参数值，将参数值与this.searchData合并
			//object.keys 返回对象中所有的key名称， 返回值数组
			this.params && Object.keys(this.searchData).forEach((key) => {
		this.searchData[key] = (this.params[key] || this.params[key] === 0 ) ? this.params[key] : null
			})
			// console.log('课程mounted合并的searchData',this.searchData)
		},
	
		
		methods: {
			
			//搜索  (data就是查询条件)
			search(data) {

				//合并关键字内容 去掉左右内容  
				// trim()  去掉左右空格   合并关键字内容 去掉左右空格
				this.searchData.content = this.content && this.content.trim()
				//合并数据 ,data中的属性会合并到this.serachData 对象 属性值上
				//对象拷贝合并Object.assign
				Object.assign(this.searchData, data)

				// console.log('查询逻辑',this.searchData)
				this.mescroll.resetUpScroll() //调用上拉的回调  
			},
			//上拉加载的回调 你  （下拉也会调用此方法，page.num = 1 ）
			async upCallback(page) {
				console.log('问答upCallback', page.num, page.size, this.searchData)

				// 根据分页条件查询列表数据
				const {
					data
				} = await api.getList(this.searchData, page.num, page.size)
				//注意是声明的常量  list 
				const currList = data.records

				//第一次家加载(下拉刷新)
				if (page.num === 1) {
					this.list = []
					//回到顶部 (举例顶部位置，市场毫秒数)
					this.mescroll.scrollTo(0, 0, )
				}

				//追加新数据concat 合并数组
				this.list = this.list.concat(currList)

				//请求成功 隐藏加摘状态
				this.mescroll.endBySize(currList.length, data.total)
			}
		}
	}
</script>

<style>
</style>
